// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_ISOTOPE.SCSS
// -----------------------------------------------------------------------------
// Styles for Isotope elements. Class names can be changed to something more
// semantic if desired.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Isotope Filtering
//   02. Isotope CSS3 Transitions
//   03. Isotope Container
//   04. Isotope Item
//   05. Filters
//   06. Loading Element
// =============================================================================

// Isotope Filtering
// =============================================================================

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}



// Isotope CSS3 Transitions
// =============================================================================

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}


//
// Disabling Isotope CSS3 transitions.
//

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}



// Isotope Container
// =============================================================================

.x-iso-container {
  margin: 0 -1em;
  @include box-sizing(content-box);
}



// Isotope Item
// =============================================================================

.x-iso-container > .hentry {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 1em 2em !important;
  @include opacity(0);
}

.x-iso-container.cols-1 > .hentry {
  width: 100%;
}

.x-iso-container.cols-2 > .hentry {
  width: 49.95%;
}

.x-iso-container.cols-3 > .hentry {
  width: 33.28%;
  @include break(old-bear) {
    width: 49.95%;
  }
}

.x-iso-container.cols-4 > .hentry {
  width: 33.28%;
  @include break(papa-bear) {
    width: 24.95%;
  }
  @include break(old-bear) {
    width: 49.95%;
  }
}

.x-iso-container[class*="cols-"] > .hentry {
  @include break(middle-bear) {
    width: 100%;
  }
}

.x-iso-container + .pagination {
  margin-top: 5px;
}

.no-js .x-iso-container > .hentry {
  @include opacity(1);
}



// Filters
// =============================================================================

.option-set {
  margin: 0 0 $layoutSpacing;
  list-style: none;
  @include clearfix();

  .x-index-filter-label,
  .x-portfolio-filter-label {
    margin: 0;
    padding-left: 15px;
    float: left;
    width: calc(100% - 42px);
    height: 42px;
    @include font-size(1.4);
    letter-spacing: 2px;
    line-height: 42px;
    text-transform: uppercase;
    background-color: $baseModBackground;
  }

  .x-index-filters,
  .x-portfolio-filters {
    display: block;
    border: 1px solid $navbarBackground;
    color: $navbarBackground;

    i {
      display: block;
      border-left: 1px solid $navbarBackground;
      float: right;
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background-color: $baseModBackground;
      @include transition(#{color 0.3s ease, background-color 0.3s ease});
    }

    &:hover {
      i {
        color: $baseModBackground;
        background-color: $navbarBackground;
      }
    }
  }

  .x-index-filters-menu,
  .x-portfolio-filters-menu {
    display: none;
    margin: 0;
    padding: 15px 15px 0;
    text-align: center;

    > li {
      display: inline-block;
      @include font-size(1.2);
      letter-spacing: 2px;
      text-transform: uppercase;

      &:after {
        content: "/";
        display: inline;
        margin: 0 0 0 3px;
      }

      > a,
      &:after {
        color: rgba(0, 0, 0, 0.35);
      }

      &:last-child:after {
        display: none;
      }

      > a {
        &:hover,
        &.selected {
          color: $navbarBackground;
        }
      }
    }
  }
}



// Loading Element
// =============================================================================

#x-isotope-loading {
  position: absolute;
  top: 75px;
  left: 50%;
  display: block;
  width: 100px;
  height: 9px;
  margin-left: -50px;
  background-image: url(../../../img/global/loading.gif);
}